//status 0未完成  1已完成
//em  1是紧急事件，0不是紧急事件
//del   0 未删除，1删除

window.onload = () => {
    var targetSpan = document.querySelector('.targetSpan');
    let emergencyBox = document.querySelector('.emergency-box');
    let completedBox = document.querySelector('.completed-box');
    let deletedBox = document.querySelector('.deleted-box');
    let addContent = document.getElementById('add-content');
    let addBtn = document.getElementById('add-btn');


    let com_del = document.querySelector('.com-del');
    let un_del = document.querySelector('.un-del');


    var completedTitle = document.querySelector('.completed-title');
    var titleLis = completedTitle.querySelectorAll('li');

    var doll = document.querySelector('.doll');
    var role = document.querySelector('.role');
    var word_item1 = document.querySelector('.word-item1');
    var word_item2 = document.querySelector('.word-item2');
    var word_p = document.querySelector('.word-p');
    load();

    //存储input里的内容
    addContent.onkeydown = (event) => {
        if (event.key === 'Enter' && addContent.value !== "") {
            var local = getData();
            //存储格式
            local.push({ title: addContent.value, status: false, em: false, del: false });
            savaDate(local);
            load();
        } else if (event.key === 'Enter' && addContent.value === "") {
            alert('代办事项不能为空');
        }
    };

    addBtn.onclick = () => {
        if (addContent.value !== "") {
            var local = getData();
            //存储格式
            local.push({ title: addContent.value, status: false, em: false, del: false });
            savaDate(local);
            load();
        } else {
            alert('代办事项不能为空');
        }
    };


    //读取本地储存
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            // JSON.parse() 将一个 JSON 字符串转换为 JavaScript 对象
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //保存本地数据
    function savaDate(data) {
        // JSON.stringify() 将 JavaScript 值转换为 JSON 字符串
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    //渲染加载数据
    function load() {
        //读取本地数据
        var data = getData();
        var unstr = "";
        var emstr = "";
        var comstr = "";
        var Tdelstr = "";
        var Fdelstr = "";
        console.log(data, "data");
        //遍历数据,拼接字符串
        data.forEach((event, index) => {
            if (event.status === true) {
                if (event.del === true) {
                    //完成且删掉
                    Tdelstr = `
                <li class="deleted-li">
                    <button class="sel"><i class="iconfont icon-checkbox-checked"
                        style="font-size: 30px;line-height: 27px;" id="${index}"></i></button>
                    <div id="unTaskText" title="${event.title}">${event.title}</div>
                    <div class="deleted-btn">
                        <button class="recover-btn"><i class="iconfont icon-fanhui"
                            style="font-size: 20px;" id="${index}"></i></button>
                        <button class="clean-btn"><i class="iconfont icon-chedishanchu"
                            style="font-size: 22px;" id="${index}"></i></button>
                    </div>

                </li>
                ${Tdelstr}`;
                } else if (event.del === false) {
                    //完成没有删掉
                    comstr = `
               <li class="completed-li"><button class="sel"><i class="iconfont icon-checkbox-checked" style="font-size: 30px;
                                                    line-height: 27px;" id="${index}"></i></button>
                                <div id="taskText" title="${event.title}">${event.title}</div>
                                <div class="iconbox">
                                <button class="delete"><i class="iconfont icon-shanchu"
                                            style="margin-left: 5px;  font-size: 25px;line-height: 25px;"id="${index}"></i></button>
                                </div>
                            </li>
                            ${comstr}`;
                }
            } else if (event.status === false) {
                if (event.del === true) {
                    //没完成删了
                    Fdelstr = `
                <li class="deleted-li">
                    <button class="sel"><i class="iconfont icon-checkbox"
                        style="font-size: 30px;line-height: 27px;" id="${index}"></i></button>
                    <div id="unTaskText" title="${event.title}">${event.title}</div>
                    <div class="deleted-btn">
                        <button class="recover-btn"><i class="iconfont icon-fanhui"
                            style="font-size: 20px;" id="${index}"></i></button>
                        <button class="clean-btn"><i class="iconfont icon-chedishanchu"
                            style="font-size: 22px;" id="${index}"></i></button>
                    </div>

                </li>
                ${Fdelstr}`;
                } else if (event.del === false) {
                    //没完成没删
                    if (event.em === true) {
                        //没完成，没删，置顶了
                        emstr = `
               <li class="emergency-li"><button class="sel"><i class="iconfont icon-checkbox" style="font-size: 30px;
                                                    line-height: 27px;" id="${index}"></i></button>
                                <div id="unTaskText" title="${event.title}">${event.title}</div>
                                <div class="uniconbox">
                                <button class="em-icon"><i class="iconfont icon-wujiaoxing-"
                                            style="margin-left: 5px; font-size: 25px;line-height: 25px;"id="${index}"></i></button>
                                <button><i class="iconfont iconfont icon-clock clock"
                                            style="margin-left: 5px; font-size: 28px;line-height: 25px;id="${index}"">
                                             <div class="timer" id="${index}">
                                <span class="second" id="${index}">5s</span>
                                <span class="hour" id="${index}">1h</span>
                                <span class="day" id="${index}">1d</span>
                                </div>
                                            </i></button>
                               
                                <button class="delete"><i class="iconfont icon-shanchu"
                                            style="margin-left: 5px;  font-size: 25px;line-height: 25px;"id="${index}"></i></button>
                                </div>
                            </li>
                            ${emstr}`;
                    } else if (event.em === false) {
                        //没完成，没删，没置顶
                        unstr = `
               <li class="uncompleted-li"><button class="sel"><i class="iconfont icon-checkbox" style="font-size: 30px;
                                                    line-height: 27px;" id="${index}"></i></button>
                                <div id="unTaskText" title="${event.title}">${event.title}</div>
                                <div class="uniconbox">
                                <button class="em-icon"><i class="iconfont icon-wujiaoxingkong"
                                            style="margin-left: 5px; font-size: 25px;line-height: 25px;"id="${index}"></i></button>
                                <button><i class="iconfont iconfont icon-clock clock"
                                            style="margin-left: 5px; font-size: 28px;line-height: 25px;id="${index}"">
                                            <div class="timer" id="${index}">
                                <span class="second" id="${index}">5s</span>
                                <span class="hour" id="${index}">1h</span>
                                <span class="day" id="${index}">1d</span>
                                </div></i></button>
                                
                                <button class="delete"><i class="iconfont icon-shanchu"
                                            style="margin-left: 5px;  font-size: 25px;line-height: 25px;"id="${index}"></i></button>
                                </div>
                            </li>
                            ${unstr}`;
                    }
                }
            }
        });
        //遍历之前清空input里的元素内容
        addContent.value = "";
        //渲染内容到HTML
        targetSpan.innerHTML = unstr;
        emergencyBox.innerHTML = emstr;
        completedBox.innerHTML = comstr;
        com_del.innerHTML = Tdelstr;
        un_del.innerHTML = Fdelstr;

        //删除的方法
        deleted();
        //完成的方法
        sel();
        //置顶设为紧急事件的方法
        eme();
        //彻底删除的方法
        clean();
        //恢复的方法
        recover();


        //tab状态栏切换功能
        for (var i = 0; i < titleLis.length; i++) {
            titleLis[i].onclick = function () {
                for (var j = 0; j < titleLis.length; j++) {
                    titleLis[j].className = '';
                }
                this.className = 'current';
                if (titleLis[1].className == "current") {
                    //deleted-box显示
                    console.log(deletedBox.style);
                    deletedBox.style.display = 'block';
                    completedBox.style.display = 'none';

                } else if (titleLis[0].className == "current") {

                    //completed-box显示
                    completedBox.style.display = 'block';
                    deletedBox.style.display = 'none';
                }
            }
        }

        //点击小女孩超过三次之后显示
        // 初始化点击计数
        var clickCount = 0;

        // 添加点击事件监听器
        doll.addEventListener('click', function () {
            // 每次点击增加计数
            clickCount++;

            if (clickCount >= 3) {
                word_item1.style.opacity = 1;
                clickCount = 0;
            }
            //设置定时器，1s后消失
            setTimeout(function () {
                word_item1.style.opacity = 0;
            }, 1200);
        });







        // // 没写出来的写法(主用排他思想)
        // // 无法完成切换
        // for (var i = 0; i < titleLis.length; i++) {
        //     titleLis[i].setAttribute('index', i);
        //     titleLis[i].onclick = function () {
        //         for (var j = 0; j < titleLis.length; j++) {
        //             titleLis[j].className = '';
        //         }
        //         this.className = 'current';
        //         var index = this.getAttribute('index');

        //         // 隐藏所有的 bottomBox
        //         for (var k = 0; k < bottom.length; k++) {
        //             bottom[Number(k)].style.display = 'none';
        //         }
        //         // 显示点击对应的 bottomBox
        //         bottom[Number(index)].style.display = 'block';
        //     }
        // }


        //提醒事件
        timers();
        //提醒时间
        second();
        hour();
        day();

    }



    //彻底删除操作
    function clean() {
        var clean_btn = document.querySelectorAll(".clean-btn");
        // console.log(del);
        if (clean_btn !== "") {
            clean_btn.forEach((element) => {
                element.onclick = function () {
                    //本地读取
                    var data = getData();
                    //修改数据
                    var index = Number(element.querySelector('i').id);
                    data.splice(index, 1);
                    //保存本地
                    savaDate(data);
                    //渲染
                    load();
                };
            });
        }
    }
    //恢复
    function recover() {
        var recover_btn = document.querySelectorAll(".recover-btn");
        if (recover_btn !== "") {
            recover_btn.forEach((element) => {
                element.onclick = function () {
                    //本地读取
                    var data = getData();
                    //修改数据
                    //获得索引
                    var index = Number(element.querySelector('i').id);
                    // console.log(data[index].done);
                    //修改数组
                    if (data[index].del === true) {
                        data.splice(index, 1, { ...data[index], del: false });
                    } else {
                        data.splice(index, 1, { ...data[index], del: true });
                    }
                    //保存本地
                    savaDate(data);

                    //渲染
                    load();
                };
            });
        }
    }
    //完成
    function sel() {
        var sel = document.querySelectorAll(".sel");
        if (sel !== "") {
            sel.forEach((element) => {
                element.onclick = function () {
                    //本地读取
                    var data = getData();
                    //修改数据
                    //获得索引
                    var index = Number(element.querySelector('i').id);
                    // console.log(data[index].done);
                    //修改数组
                    if (data[index].status === false) {
                        data.splice(index, 1, { ...data[index], status: true });
                    } else {
                        data.splice(index, 1, { ...data[index], status: false });
                    }
                    //保存本地
                    savaDate(data);

                    //渲染
                    load();
                };
            });
        }
    }

    //放入垃圾箱
    function deleted() {
        var deleted = document.querySelectorAll(".delete");
        if (deleted !== "") {
            deleted.forEach((element) => {
                element.onclick = function () {
                    //本地读取
                    var data = getData();
                    //修改数据
                    //获得索引
                    var index = Number(element.querySelector('i').id);
                    // console.log(data[index], "===");
                    // console.log({ ...data[index], del: true });
                    //修改数组
                    if (data[index].del === false) {
                        data.splice(index, 1, { ...data[index], del: true });
                    } else {
                        data.splice(index, 1, { ...data[index], del: false });
                    }
                    // console.log(data);
                    //保存本地
                    savaDate(data);

                    //渲染
                    load();
                };
            });
        }
    }


    //置顶设为紧急事件的方法
    function eme() {
        var emIcon = document.querySelectorAll(".em-icon");
        if (emIcon !== "") {
            emIcon.forEach((element) => {
                element.onclick = function () {
                    //本地读取
                    var data = getData();
                    //修改数据
                    //获得索引
                    var index = Number(element.querySelector('i').id);
                    // console.log(data[index], "===");
                    // console.log({ ...data[index], del: true });
                    //修改数组
                    if (data[index].em === false) {
                        data.splice(index, 1, { ...data[index], em: true });
                    } else {
                        data.splice(index, 1, { ...data[index], em: false });
                    }
                    // console.log(data);
                    //保存本地
                    savaDate(data);

                    //渲染
                    load();
                };
            });
        }
    }

    //控制女孩监听鼠标位置移动
    // 添加鼠标移动事件监听器
    role.addEventListener('mousemove', function (event) {
        // console.log(event.clientX);
        // 判断鼠标位置并改变背景
        if (event.clientX <= 1130) {
            doll.style.backgroundPosition = '0px 0px';
        } else if (event.clientX > 1130 && event.clientX <= 1170) {
            doll.style.backgroundPosition = '-203px 0px';
        } else if (event.clientX > 1280 && event.clientX < 1320) {
            doll.style.backgroundPosition = '-609px 0px';
        } else if (event.clientX >= 1320) {
            doll.style.backgroundPosition = '-812px 0px';
        } else {
            doll.style.backgroundPosition = '-406px 0px';
        }
    });


    //提醒事件
    function timers() {
        var clock = document.querySelectorAll(".clock");
        // console.log(clock);
        clock.forEach((element) => {
            var isShow = false;
            var time;
            // console.log(element);
            element.onclick = function () {
                clearTimeout(time);
                if (!isShow) {
                    isShow = true;

                    element.childNodes[1].style.display = "block";
                } else {
                    isShow = false;
                    element.childNodes[1].style.display = "none";
                }
                //鼠标移入事件
                element.onmouseover = () => {
                    clearTimeout(time);
                };
                //鼠标移出事件
                element.onmouseout = () => {
                    clearTimeout(time);
                    //计时器更改属性
                    if (isShow) {
                        time = setTimeout(() => {
                            element.childNodes[1].style.display = "none";
                            isShow = false;
                        }, 400);
                    }
                };
            };
        });
    }
    //计时5s
    function second() {
        let second = document.querySelectorAll(".second");
        second.forEach((element) => {
            element.onclick = function () {
                //本地读取
                var data = getData();
                var index = element.getAttribute("id");
                var time;
                var stv = "";
                // console.log(index);
                clearTimeout(time);
                time = setTimeout(function () {
                    word_item2.style.opacity = 1;
                    stv = data[index].title;
                    word_p.innerHTML = `任务${stv}时间到啦`;
                }, 5000);
                setTimeout(function () {
                    word_item2.style.opacity = 0;
                }, 8000);
            };
        });
    }
    //计时1小时
    function hour() {
        let hour = document.querySelectorAll(".hour");
        hour.forEach((element) => {
            element.onclick = function () {
                //本地读取
                var data = getData();
                var stv = "";
                var index = element.getAttribute("id");
                var time;
                clearTimeout(time);
                time = setTimeout(function () {

                    word_item2.style.opacity = 1;
                    stv = data[index].title;
                    word_p.innerHTML = `任务${stv}时间到啦`;
                }, 60 * 1000 * 60);
                setTimeout(function () {
                    word_item2.style.opacity = 0;
                }, 60 * 1000 * 60 + 3000);
            };
        });
    }
    //计时一天
    function day() {
        let day = document.querySelectorAll(".day");
        day.forEach((element) => {
            element.onclick = function () {
                //本地读取
                var data = getData();
                var index = element.getAttribute("id");
                var time;
                var stv = "";
                // console.log(index)
                clearTimeout(time);
                time = setTimeout(function () {
                    word_item2.style.opacity = 1;
                    stv = data[index].title;
                    word_p.innerHTML = `任务${stv}时间到啦`;
                }, 1000 * 60 * 60 * 24);
                setTimeout(function () {
                    word_item2.style.opacity = 0;
                }, 1000 * 60 * 60 * 24 + 3000);
            };
        });
    }


}
